<template>
    <div class="home-container">
      <van-nav-bar :fixed="true">
        <van-button slot="title" icon="search" type="primary" round>搜索</van-button>
      </van-nav-bar>
      <van-tabs v-model="active" animated swipeable class="home-tabs">
        <van-tab v-for="item in channels" :title="item.name" :key="item.id" class="article-list">
          <article-list :channel='item'>
          </article-list>
        </van-tab>
        <div slot="nav-right" class="gongjuren"></div>
        <div slot="nav-right" class="nav-right">
          <i class="iconfont icongengduo" @click="showPopup"></i>
        </div>
      </van-tabs>
      <van-popup v-model="show" position="bottom"  close-icon-position="top-left" closeable :style="{ height: '90%' }"><channel-popup /></van-popup>
    </div>
</template>

<script>
import channelPopup from './component/channelPopup'
import { getUserChanel } from '@/api/user.js'
import articleList from './component/articleList'
export default {
  name: 'home',
  data () {
    return {
      active: 0,
      channels: [],
      show: false
    }
  },
  components: {
    articleList,
    channelPopup
  },
  created () {
    this.getChanel()
  },

  methods: {
    async getChanel () {
      try {
        const { data } = await getUserChanel()
        // console.log(data)
        this.channels = data.channels
      } catch (err) {
        console.log(err)
      }
    },
    showPopup () {
      this.show = true
    }
  }
}
</script>

<style scoped lang='less'>
.home-container {
  padding-bottom: 100px;
  padding-top: 172px;
  /deep/.van-nav-bar {
    .van-nav-bar__title {
      max-width: unset;
    }
    .van-button {
      width:555px;
      height:64px;
      background:rgba(255,255,255,0.2);
      border-radius:32px;
      border: 0;
      .van-icon {
        font-size: 32px;
      }
      span {
        font-size: 28px;
      }
    }
  }
  /deep/.home-tabs {
    .van-tabs__wrap {
      position: fixed;
      top: 96px;
      z-index: 3;
      height: 80px;
      width: 100%;
    }
    .van-tabs__nav {
      height: 80px;
      .van-tab {
        border-right: #EDEFF3 1px solid;
        min-width: 230px;
        color: #777777;
        font-size: 30px;
      }
      .van-tab--active {
        color: #333333;
      }
      .van-tabs__line {
        width: 31px !important;
        background-color: #3296FA;
        margin-bottom: 4px;
      }
      .gongjuren {
        flex-shrink: 0;
        width: 66px !important;
        height: 80px;
      }
      .nav-right {
        position: fixed;
        right: 0px;
        width: 66px;
        height: 80px;
        background-color: white;
        opacity: 0.9;
        text-align: center;
        line-height: 80px;
        &:before {
          content: '';
          background: url('../../assets/gradient-gray-line.png');
          position: absolute;
          width: 2px;
          height: 58px;
          left: 0;
          top: 11px;
          background-size: contain;
        }
        .iconfont {
          font-size: 40px;
          color: #333333;
        }
      }
    }
  }
}
</style>
